<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .menu {
            position: absolute;
            left: -200px;
            top: 400px;
            width: 200px;
        }

        .menu .btn {
            width: 30px;
            background: #ccc;
            line-height: 30px;
            text-align: center;
            height: 60px;
            position: absolute;
            right: -30px;
            top: 10px;
        }

        .menu .x {
            width: 200px;
            height: 80px;
            background: #efefef;
            position: absolute;
        }

        .menu .y {
            width: 200px;
            height: 0px;
            background: #aaa;
            position: absolute;
            top: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="btn">分享</div>
        <div class="x">这是横向内容</div>
        <div class="y">这是纵向内容</div>
    </div>
</body>
<script src="../move.js"></script>
<script>
    const obtn = document.querySelector(".btn");
    const omenu = document.querySelector(".menu");
    const oy = document.querySelector(".y");

    // 提前设定按钮的状态库
    const STATUS = {
        show: Symbol(),
        hide: Symbol()
    }

    // 设置初始状态
    let now = STATUS.show;

    obtn.onclick = function () {
        // 判断状态，根据状态决定执行的功能
        if (now === STATUS.show) {
            // 显示时，先显示横向
            move(omenu, {
                left: 0
            }, () => {
                // 横向显示完成后，显示纵向
                move(oy, {
                    top: -300,
                    height: 300
                })
            })
            // 修改状态
            now = STATUS.hide
        } else {

            move(oy, {
                top: 0,
                height: 0
            }, () => {
                move(omenu, {
                    left: -200
                })
            })

            now = STATUS.show
        }
    }

</script>
</html>